<template>
  <div>
    <CanvasEditor
      ref="wordEditor"
      :editMode="type"
      :htmlData="htmlData"
      :docJson="docJson"
      :key="keys"
      @save="save"
      @isSave="getSave"
    />
  </div>
</template>

<script>
import { getDataListApi } from "@/api/crm/sa/report/detail"
import CanvasEditor from "@/components/CanvasEditor/report.vue";

export default {
  name: "ReportDetail",
  components: {CanvasEditor},
  dicts: ['sys_project_schedule', 'sys_activity_type'],
  data() {
    return {
      loading: false,
      // 增加和修改的数据
      // plan: {
      //   createBy: "", // 创建人
      //   createTime: "", // 创建时间
      //   deptId: this.$store.state.user.deptId, // 部门id
      //   id: null, // id
      //   name: null, // 计划名称
      //   other: "", // 其他事宜
      //   remark: "", // 备注
      //   team: "", // 团队建设
      //   updateBy: "", // 更新人
      //   updateTime: "", // 更新时间
      //   userId: this.$store.state.user.id, // 用户id
      // },
      type: '', // 编辑器模式
      htmlData: '', // 编辑器html数据
      docJson: null, // 编辑器getValue数据
      keys: new Date().getTime(),
      // 销售计划默认内容
      planJson: {
        header: [],
        main: [
          {
            value: "周报",
            size: 32,
            bold: true,
            color: "rgb(26, 26, 26)",
            italic: false,
            rowFlex: "center"
          },
          {
            value: "\n"
          },
          {
            value: "客户数量：",
            size: 16,
            bold: false,
            color: "rgb(51, 51, 51)",
            italic: false
          },
          {
            value: "0",
            size: 16,
            bold: false,
            // color: "rgb(255, 0, 0)",
            italic: false
          },
          {
            value: "",
            type: "table",
            trList: [
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"客户名称"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"属性"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"地址"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"法定代表人"}]
                  }
                ],
                minHeight: 42
              },
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  }
                ],
                minHeight: 42
              },
            ],
            width: 554,
            height: 84,
            colgroup: [
              {width: 112},
              {width: 90},
              {width: 255},
              {width: 95}
            ]
          },
          {
            value: "\n"
          },
          {
            value: "代理商数量：",
            size: 16,
            bold: false,
            color: "rgb(51, 51, 51)",
            italic: false
          },
          {
            value: "0",
            size: 16,
            bold: false,
            // color: "rgb(255, 0, 0)",
            italic: false
          },
          {
            value: "",
            type: "table",
            trList: [
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"代理商名称"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"地址"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"实际控制人"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"法定代表人"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"合作开始时间"}]
                  },
                ],
                minHeight: 42
              },
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  }
                ],
                minHeight: 42
              },
            ],
            width: 554,
            height: 84,
            colgroup: [
              {width: 95},
              {width: 160.39999999999998},
              {width: 92.39999999999998},
              {width: 92.39999999999998},
              {width: 112.39999999999998}
            ]
          },
          {
            value: "\n"
          },
          {
            value: "项目数量：",
            size: 16,
            bold: false,
            color: "rgb(51, 51, 51)",
            italic: false
          },
          {
            value: "0",
            size: 16,
            bold: false,
            // color: "rgb(255, 0, 0)",
            italic: false
          },
          {
            value: "",
            type: "table",
            trList: [
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"项目名称"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"预算金额(万元)"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"客户/代理商"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"联系人"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"中标金额(万元)"}]
                  },
                ],
                minHeight: 42
              },
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  }
                ],
                minHeight: 42
              },
            ],
            width: 554,
            height: 84,
            colgroup: [
              {width: 111},
              {width: 122.39999999999998},
              {width: 109.39999999999998},
              {width: 91.39999999999998},
              {width: 118.39999999999998}
            ]
          },
          {
            value: "\n"
          },
          {
            value: "项目进度：",
            size: 16,
            bold: false,
            color: "rgb(51, 51, 51)",
            italic: false
          },
          {
            value: "0",
            size: 16,
            bold: false,
            // color: "rgb(255, 0, 0)",
            italic: false
          },
          {
            value: "",
            type: "table",
            trList: [
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"项目名称"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"进度"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"进度日期"}]
                  }
                ],
                minHeight: 42
              },
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  }
                ],
                minHeight: 42
              },
            ],
            width: 554,
            height: 84,
            colgroup: [
              {width: 233},
              {width: 156.39999999999998},
              {width: 164.60000000000002},
            ]
          },
          {
            value: "\n"
          },
          {
            value: "拜访记录：",
            size: 16,
            bold: false,
            color: "rgb(51, 51, 51)",
            italic: false
          },
          {
            value: "0",
            size: 16,
            bold: false,
            // color: "rgb(255, 0, 0)",
            italic: false
          },
          {
            value: "",
            type: "table",
            trList: [
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"名称"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"二级部门"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"联系人"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"汇报内容"}]
                  },
                ],
                minHeight: 42
              },
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  }
                ],
                minHeight: 42
              },
            ],
            width: 554,
            height: 84,
            colgroup: [
              {width: 110.8},
              {width: 86.8},
              {width: 91.8},
              {width: 264.6}
            ]
          },
          {
            value: "\n"
          },
          {
            value: "市场活动：",
            size: 16,
            bold: false,
            color: "rgb(51, 51, 51)",
            italic: false
          },
          {
            value: "0",
            size: 16,
            bold: false,
            // color: "rgb(255, 0, 0)",
            italic: false
          },
          {
            value: "",
            type: "table",
            trList: [
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"类型"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"内容"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"日期"}]
                  }
                ],
                minHeight: 42
              },
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  }
                ],
                minHeight: 42
              },
            ],
            width: 554,
            height: 84,
            colgroup: [
              {width: 197},
              {width: 197},
              {width: 160},
            ]
          },
        ],
        footer: []
      },
    }
  },
  created() {
    this.createdHandler()
  },
  activated() {
    this.createdHandler()
  },
  methods: {
    async createdHandler() {
      this.planJson = { ...this.$options.data().planJson }
      const _this = this
      const res = await getDataListApi({
        id: this.$route.query.report ?? 0
      }).catch(() => {})

      if(res?.code && res.code === 200 && res.data) {
        const data = res.data
        // 客户
        const clientList = (data.weeklyClientList ?? []).map((item) => {
          return {
            height: 42,
            tdList: [
            {
              colspan: 1,
              rowspan: 1,
              value: [{value: item.name}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value: item.isImportant === 1 ? '重点客户' : '普通客户'}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value: item.address}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value: item.legalPerson}]
            }
          ],
            minHeight: 42
          }
        })
        // 代理商
        const agentList = (data.weeklyAgentList ?? []).map((item) => {
          return {
            height: 42,
            tdList: [
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.name}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.address}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.legalPerson}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.controllerPerson}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.startDate}]
              }
            ],
            minHeight: 42
          }
        })
        // 项目
        const projectList = (data.weeklyProjectList ?? []).map((item) => {
          return {
            height: 42,
            tdList: [
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.name}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.amount || ""}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.clientName ? item.clientName : item.agentName }]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.contactName}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.bidAmount || ""}]
              }
            ],
            minHeight: 42
          }
        })
        // 项目进度
        const processList = (data.weeklyProcessList ?? []).map((item) => {
          return {
            height: 42,
            tdList: [
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.name}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: _this.getListValue(item.schedule, _this.dict.type.sys_project_schedule)}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.nowDate }]
              }
            ],
            minHeight: 42
          }
        })
        // 拜访记录
        const visitList = (data.weeklyVisitList ?? []).map((item) => {
          return {
            height: 42,
            tdList: [
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.schoolOrCompanyName}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.facultyName}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.contactName}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.content}]
              }
            ],
            minHeight: 42
          }
        })
        // 市场活动
        const activityList = (data.weeklyActivityList ?? []).map((item) => {
          return {
            height: 42,
            tdList: [
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: _this.getListValue(item.type, _this.dict.type.sys_activity_type)}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.content}]
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [{value: item.activityDate}]
              }
            ],
            minHeight: 42
          }
        })

        clientList.unshift({
          height: 42,
          tdList: [
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"客户名称"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"属性"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"地址"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"法定代表人"}]
            }
          ],
          minHeight: 42
        })
        agentList.unshift({
          height: 42,
          tdList: [
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"代理商名称"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"地址"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"实际控制人"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"法定代表人"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"合作开始时间"}]
            },
          ],
          minHeight: 42
        })
        projectList.unshift({
          height: 42,
          tdList: [
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"项目名称"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"预算金额(万元)"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"客户/代理商"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"联系人"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"中标金额(万元)"}]
            },
          ],
          minHeight: 42
        })
        processList.unshift({
          height: 42,
          tdList: [
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"项目名称"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"进度"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"进度日期"}]
            }
          ],
          minHeight: 42
        })
        visitList.unshift({
          height: 42,
          tdList: [
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"名称"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"二级部门"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"联系人"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"汇报内容"}]
            }
          ],
          minHeight: 42
        })
        activityList.unshift({
          height: 42,
          tdList: [
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"类型"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"内容"}]
            },
            {
              colspan: 1,
              rowspan: 1,
              value: [{value:"日期"}]
            }
          ],
          minHeight: 42
        })

        if(clientList.length >= 2) {
          this.planJson.main[3].value = clientList.length - 1 // <= 0 ? 0 : clientList.length - 1
          this.planJson.main[4].trList = clientList
        }

        if(agentList.length >= 2) {
          this.planJson.main[7].value = agentList.length - 1 // <= 0 ? 0 : agentList.length - 1
          this.planJson.main[8].trList = agentList
        }

        if(projectList.length >= 2) {
          this.planJson.main[11].value = projectList.length - 1 // <= 0 ? 0 : projectList.length - 1
          this.planJson.main[12].trList = projectList
        }

        if(processList.length >= 2) {
          this.planJson.main[15].value = processList.length - 1 // <= 0 ? 0 : processList.length - 1
          this.planJson.main[16].trList = processList
        }

        if(visitList.length >= 2) {
          this.planJson.main[19].value = visitList.length - 1 // <= 0 ? 0 : visitList.length - 1
          this.planJson.main[20].trList = visitList
        }

        if(activityList.length >= 2) {
          this.planJson.main[23].value = activityList.length - 1 // <= 0 ? 0 : activityList.length - 1
          this.planJson.main[24].trList = activityList
        }
      }

      this.type = 'edit'

      this.docJson = JSON.stringify(this.planJson)
    },
    // 获取根据list中的value返回label
    getListValue(data, list, value = 'value') {
      let label = ''
      list.map((item) => {
        if(+item[value] === +data) {
          label = item.label
        }
      })
      return label
    },
    save({data}) {
      console.log(data)
      const json = {
        header: [],
        main: [
          {
            value: "周报",
            size: 32,
            bold: true,
            color: "rgb(26, 26, 26)",
            italic: false,
            rowFlex: "center"
          },
          {
            value: "\n"
          },
          {
            value: "客户数量：",
            size: 14,
            bold: false,
            color: "rgb(51, 51, 51)",
            italic: false
          },
          {
            value: "",
            size: 14,
            bold: false,
            color: "rgb(255, 0, 0)",
            italic: false
          },
          {
            value: "",
            type: "table",
            trList: [
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: [{value:"客户名称"}]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  }
                ],
                minHeight: 42
              },
              {
                height: 42,
                tdList: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    value: []
                  }
                ],
                minHeight: 42
              }],
            width: 553.9999999999999,
            height: 84,
            colgroup: [
              {width: 55.4},
              {width: 55.4},
              {width: 55.4},
              {width: 55.4},
              {width: 55.4},
              {width: 55.4},
              {width: 55.4},
              {width: 55.4},
              {width: 55.4},
              {width: 55.4}
            ]
          },
          {
            value: "\n"
          }
        ],
        footer: []
      }
    },
    getSave(a) {
      // console.log(a);
    },
  },
}
</script>

<style scoped lang="scss">
.demo-ruleForm {
  max-width: 1200px;
}

.btn-box {
  width: 100px;
  margin-left: 10px;
}

.flex {
  display: flex;
  align-items: center;
}

.title {
  font-size: 28px;
  font-weight: bolder;
  text-align: center;
}
</style>
